<div class="sheet-info wrap feature-wrap">
  <div class="g-wrap6">
    <div class="m-info clearfix">
      <div class="cover">
        <img [src]="sheetInfo.coverImgUrl" [alt]="sheetInfo.name">
        <div class="mask"></div>
      </div>
      <div class="cnt">
        <div class="cntc">
          <div class="hd clearfix">
            <i class="f-pr"></i>
            <div class="tit">
              <h2 class="f-ff2 f-brk">{{sheetInfo.name}}</h2>
            </div>
          </div>

          <div class="user f-cb">
            <a class="face" [hidden]="!sheetInfo.creator" [href]="'//music.163.com/artist?id=' + sheetInfo.userId">
              <img [src]="sheetInfo.creator?.avatarUrl" [alt]="sheetInfo.creator?.nickname">
            </a>
            <span class="name">
              <a [href]="'//music.163.com/artist?id=' + sheetInfo.userId" class="s-fc7">{{sheetInfo.creator?.nickname}}</a>
            </span>
            <span class="time s-fc4">{{sheetInfo.createTime | date: 'yyyy-MM-dd'}} 创建</span>
          </div>

          <div class="btns">
            <nz-button-group class="btn">
              <button class="play" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks, true)">
                <i nz-icon nzType="play-circle" nzTheme="outline"></i>播放
              </button>
              <button class="add" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks)">+</button>
            </nz-button-group>
            <button class="btn like" nz-button [disabled]="sheetInfo.subscribed" (click)="onLikeSheet(sheetInfo.id.toString())">
              <span>收藏</span>({{sheetInfo.subscribedCount}})
            </button>
            <button class="btn share" nz-button (click)="shareResource(sheetInfo, 'playlist')">
              <span>分享</span>({{sheetInfo.shareCount}})
            </button>
          </div>

          <div class="tags clearfix">
            <span>标签</span>
            <div class="tag-wrap">
              <nz-tag *ngFor="let item of sheetInfo.tags">{{item}}</nz-tag>
            </div>
          </div>

          <div class="intr f-brk" [class.f-hide]="controlDesc.isExpand">
            <p [innerHTML]="description.short"></p>
          </div>

          <div class="intr f-brk" [class.f-hide]="!controlDesc.isExpand">
            <p [innerHTML]="description.long"></p>
          </div>

          <div class="expand" (click)="toggleDesc()" *ngIf="description.long">
            <span>{{controlDesc.label}}</span>
            <i nz-icon [nzType]="controlDesc.iconCls" nzTheme="outline"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="wy-sec">
      <div class="u-title wy-sec-wrap clearfix">
        <h3 class="wy-sec-tit">
          <span class="f-ff2">歌曲列表</span>
        </h3>
        <span class="sub s-fc3">
          {{sheetInfo.tracks.length}} 首歌
        </span>
        <div class="more s-fc3">
          播放：
          <strong class="s-fc6">{{sheetInfo.playCount}}</strong>
          次
        </div>
      </div>

      <nz-table
        class="wy-table"
        #basicTable
        [nzData]="sheetInfo.tracks"
        [nzFrontPagination]="false"
        nzBordered
        nzNoResult="暂无音乐！">
        <thead>
          <tr>
            <th nzWidth="80px"></th>
            <th>标题</th>
            <th nzWidth="120px">时长</th>
            <th nzWidth="80px">歌手</th>
            <th>专辑</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of basicTable.data; index as i">
            <td class="first-col">
              <span>{{i + 1}}</span>
              <i class="ico play-song" title="播放" [class.current]="currentIndex === i" (click)="onAddSong(item, true)"></i>
            </td>
            <td class="song-name">
              <a [routerLink]="['/songInfo', item.id]">{{item.name}}</a>
            </td>
            <td class="time-col">
              <span>{{item.dt / 1000 | formatTime}}</span>
              <p class="icons">
                <i class="ico add" title="添加" (click)="onAddSong(item)"></i>
                <i class="ico like" title="收藏" (click)="onLikeSong(item.id.toString())"></i>
                <i class="ico share" title="分享" (click)="shareResource(item)"></i>
              </p>
            </td>
            <td>
              <ng-container *ngFor="let singer of item.ar; last as isLast">
                <a [routerLink]="['/singer', singer.id]">{{singer.name}}</a>
                <em [hidden]="isLast">/</em>
              </ng-container>
            </td>
            <td>{{item.al.name}}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>